<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span#prompt {
            color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="file" id="file">
        简介： <input type="text" id="info">
        <button type="submit" id="btn">上传</button>
        <span id="prompt"></span>
    </div>
    <script src="/js/jquery-3.6.0.js"></script>
    <script>
        $(function() {
            $('#btn').click(function() {
                var file = $('#file')[0].files[0];
                console.log(file)
                // console.log("file:", file);
                if(file) {
                    var data = new FormData();
                    data.append("myFile", file);
                    data.append("info", $('#info').val());
                    // console.log("data:", data);
                    $.ajax({
                        data: data,
                        url: "/upload",
                        type: "post",
                        contentType: false,  // 必须要有的
                        processData: false, // 不能少
                        success: function(res) {
                            // console.log("res:", res);
                            var data = JSON.parse(res).data;
                            // console.log("data:", data);
                            var img = "<img src="+data.result.src+" />"
                            $('#box').append(img);
                        },
                        error: function(err) {
                            console.log("err:", err);
                        }
                    })
                } else {
                    $('#prompt').html("请添加文件后提交")
                }
            })
        })
    </script>
</body>
</html>